/* 
 * To change this template, choose Tools | Templates
 * and open the template in the editor.
 */

var SlidingDoors = new Class({
    
    Implements: [Options,Events],
    
    pointer : 0,
    slides  : new Array(),
    mask    : null,
    
    options: {
        el : null,
        skipFirstSlide: true
    },
    
    initialize: function(options){
        this.setOptions(options); 
        //create mask
        this.mask = new Element('div', {
            styles: {
                'width'    : '100%',
                'height'   : '100%',
                'position' : 'relative',
                'overflow' : 'hidden'
            }
        });
        //create sliding doors
        this.slides = new Array(
            new Element('div', {
                styles: {
                    'width'    : '100%',
                    'height'   : '100%',
                    'position' : 'absolute',
                    'top'      : 0,
                    'left'     : 0,
                    'z-index'  : 1
                },
                'class' : 'activeSlide'
                
            }),
            new Element('div', {
                styles: {
                    'width'    : '100%',
                    'height'   : '100%',
                    'position' : 'absolute',
                    'top'      : 0,
                    'left'     : 0,
                    'z-index'  : 0,
                    'opacity': 0
                }
            })
        );
        //prepare sliding doors
        $(this.options.el).empty();
        this.slides[0].inject(this.mask);
        this.slides[1].inject(this.mask);        
        this.mask.inject($(this.options.el));
    },
    getCurrent: function(){
        return this.slides[this.pointer];
    },
    getNext: function(){
        return this.slides[(this.pointer+1)%this.slides.length];
    },
    slide: function(){        
        
        this.getCurrent().removeClass('activeSlide');
        this.getNext().addClass('activeSlide');
        if(this.options.skipFirstSlide){            
            this.options.skipFirstSlide = false;
            
            this.pointer = ++this.pointer%this.slides.length;
            this.fireEvent('end', [this], 750);            
            
            return;
        }
        this.getNext().get('tween').removeEvents();
        this.getCurrent().get('tween').removeEvents();
        this.getNext().set('tween', {
            duration: 750,
            onComplete: function(){ 
                this.getCurrent().setStyle('z-index', 1);
                this.getNext().setStyle('z-index', 0);
                this.pointer = ++this.pointer%this.slides.length;
                this.fireEvent('end',[this]);
            }.bind(this)               
        });
        this.getCurrent().set('tween', {
            duration: 750
        });

        this.getCurrent().fade('in');
        this.getNext().fade('out');
    }    
    
});
var FlipingDoors = new Class({
    
    Implements: [Options,Events],
    
    pointer : 0,
    slides  : new Array(),
    mask    : null,
    
    options: {
        el : null,
        skipFirstSlide: true
    },
    
    initialize: function(options){
        this.setOptions(options); 
        //create mask
        this.mask = new Element('div', {
            'class' : 'mask'
        });
        this.card = new Element('div', {
            'class' : 'card'
        });
        //create sliding doors
        this.slides = new Array(
            new Element('div', {
                'class' : 'activeSlide side front'                
            }),
            new Element('div', {
                'class' : 'side back' 
            })
        );
        //prepare sliding doors
        $(this.options.el).empty();
        this.slides[0].inject(this.card);
        this.slides[1].inject(this.card);   
        this.card.inject(this.mask);
        this.mask.inject($(this.options.el));
    },
    getCurrent: function(){
        return this.slides[this.pointer];
    },
    getNext: function(){
        return this.slides[(this.pointer+1)%this.slides.length];
    },
    slide: function(){        
        
        this.getCurrent().removeClass('activeSlide');
        this.getNext().addClass('activeSlide');
        if(this.options.skipFirstSlide){            
            this.options.skipFirstSlide = false;
            
            this.pointer = ++this.pointer%this.slides.length;
            this.fireEvent('end', [this], 1100);            
            
            return;
        }   

        this.card.toggleClass('flipped');
        this.pointer = ++this.pointer%this.slides.length;
        this.fireEvent('end', [this], 1100); 

    }    
    
});